<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>
<body>


<div id="app">

</div>


<script>


    var APP = {

        template: `<div>

        <input type="text" v-model="ms">
        <p>{{ms}}</p>
        <h3>{{type}}</h3>

        <button @click="changevalue">改变</button>
        <h2>{{stus[0].name}}</h2>




</div>`,
        data:function () {
            return{

                ms:"xingweixin",
                stus:[{name:"xingweixin"}]

            }
        },
        props:['type'],
        watch:{


            ms:function (newV,oldV) {

              if (newV == "xingweixin"){

                  console.log("hahhaha");
              }

            },

           stus: {

                deep:true,
                handler:function (newV,oldV) {
                    console.log(this);

                    console.log(newV[0].name);
                }



           }





            },
        methods:{

            changevalue:function () {

               this.stus[0].name="冯梦月";
            }



        }

    }


    new Vue({

        el: "#app",
        template: `<APP type='我是一个兵'></APP>`,
        date: function () {
            return {
                msg: "xingweixin"


            }
        },

        components:{
            APP

        }


    })


</script>

</body>
</html>